<template>
	<!-- 大屏通用title组件 -->
	<div class="dataScreen-title">
		<img
			class="title-star"
			src="@/assets/screenImg/headImg/itemTitleStar.gif"
			alt=""
		/>
		<!-- 左侧title，以背景图形式导入 -->
		<div class="title-name">
			<img :src="itemTitleImg" alt="" @click="clickTitle" :class="{notActive: !isActive}" />
		</div>
		<!-- 右侧按钮，在父组件以插槽形式导入 -->
		<div class="title-rightBtn">
			<slot name="rightCnBox"></slot>
		</div>
	</div>
</template>
<script setup name="screenCommonTitle">
const props = defineProps({
	// title图片的url
	itemTitleImg: {
		required: true,
		default: "",
	},
  isActive: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits("clickItem");
const clickTitle = () => {
	emits("clickItem");
};
</script>

<style lang="scss" scoped>
.dataScreen-title {
	width: 100%;
	height: 60px;
	position: relative;
	background: url("@/assets/screenImg/headImg/itemTitleBg.png") no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 10px 10px;
	.title-star {
		width: 22px;
		height: 22px;
		position: absolute;
		left: 46px;
		top: 10px;
	}
	.title-name {
		// height: 38px;
		margin-left: 100px;
		img {
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
    .notActive{
      width: 74px;
    }
	}
	.title-rightBtn {
		flex: 1;
		font-size: 12px;
		color: #bad0f8;
		margin-right: 50px;
		float: right;
		letter-spacing: 2px;
	}
}
</style>
